<template>
  <div>
    <h2>添加商品</h2>名称
    <input type="text" v-model="name" />
    图片
    <input type="file" id="img" />
    价格
    <input type="number" v-model="price" />
    分类
    <select v-model="cate">
      <option v-for="i in cates" :value="i.id">{{i.name}}</option>
    </select>
    <button @click="sub">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
        name:'',
        price:'',
        cate:0,
      cates: []
    };
  },
  mounted(){
      this.axios({
          url:'http://127.0.0.1:8000/app03/cate/',
          method:'get'
      }).then(res=>{
          this.cates = res.data;
      })
  },
  methods:{
      sub:function(){
          // 1 获取图片
          let img = document.getElementById('img').files[0];
          // 2 FormData  只要涉及到二进制的文件 就需要使用FormData
          let formdata = new FormData();
          formdata.append("name",this.name);
          formdata.append("price",this.price);
          formdata.append("cate",this.cate);
          formdata.append("img",img);
          // 3 
          this.axios({
              url:'http://127.0.0.1:8000/app03/goods/',
              method:'post',
              data:formdata
          }).then(res=>{
              alert(res.data.msg);
          })
      }
  }
};
</script>

<style>
</style>